<template>
    <el-card v-for="item in joke.content" class="joke-card">
      <div class="joke-content">
        <p>{{ item.content }}</p>
      </div>
      <!-- <div class="joke-footer">
        <span class="time">{{ joke.timestamp }}</span>
      </div> -->
    </el-card>
    
  </template>
  
  <script>
  export default {
    name: 'JokeCard',
    props: {
      joke: {
        type: Object,
        required: true
      }
    }
  }
  </script>
  
  <style scoped>
  .joke-card {
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    background: linear-gradient(to right, #ffecd2, #ffd4c6);
  }
  
  .joke-content {
    padding: 0px;
    font-size: 16px;
    line-height: 1.6;
  }
  
  .joke-footer {
    /* padding: 10px 20px; */
    border-top: 1px solid #eee;
    color: #999;
    font-size: 14px;
  }
  </style>